<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#big{
				width: 800px;
				height: 800px;
				border: 1px solid black;
				position: relative;
			}
			#small{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#small2{
				width:100px;
				height: 100px;
				background-color: red;
				top: 300px;
				position: absolute;
				left: 300px;
			}
		</style>
	</head>
	<body>
		<div id="big">
			<div id="small">
				
			</div>
			<div id="small2">
				
			</div>
		</div>
	</body>
	<script>
		var big=document.getElementById('big');
		var small=document.getElementById('small');
		var small2=document.getElementById('small2');
		small.onmousedown=function(event){
			//获取鼠标摁下的坐标点
			var x=event.clientX-small.offsetLeft;
			var y=event.clientY-small.offsetTop;
			document.onmousemove=function(event){
				var _x=event.clientX;
				var _y=event.clientY;
				small.style.left=_x-x+"px";
				small.style.top=_y-y+"px";
				
				if((small.offsetLeft+small.offsetWidth)>=small2.offsetLeft&&(small2.offsetLeft+small2.offsetWidth)>=small.offsetLeft&&(small.offsetTop+small.offsetHeight)>=small2.offsetTop&&(small2.offsetTop+small2.offsetHeight)>=small.offsetTop){
					small2.style.backgroundColor='yellow';
				}else{
					small2.style.backgroundColor='red';
				}

			}
		}
		document.onmouseup=function(){
			document.onmousemove="";
		}
	</script>
</html>